import React, { useState } from 'react';
import ReactDraggable from './components/drag'
import './index.css'

const App = () => {

    const [list, setList] = useState([{ id: 1, title: "语文" }, { id: 2, title: '数学' }, { id: 3, title: '英语' }])
    const [list2, setList2] = useState([{ id: 4, title: "物理" }, { id: 5, title: '化学' }, { id: 6, title: '生物' }])
    const [moveClassName, setMoveClassName] = useState('moveing');

    const DemoBlock = ({ text }) => {
        return (
            <div style={{ width: '100px', height: '100px', background: '#FFFFFF', margin: '5px' }}>
                <div className={`move ${text === '英语' ? 'filter' : ''}`} style={{ width: '20px', height: '20px', background: '#f60', cursor: 'move' }}></div>
                {text}
            </div>
        )
    }

    return (
        <div>
            <p>
                <button onClick={() => {
                    setMoveClassName(moveClassName === 'moveing' ? 'moveing1' : 'moveing')
                }}>切换</button>
            </p>
            <div className='wrapper'>
                <ReactDraggable
                    className='draggable_container'
                    animation={1000}
                    sort
                    handle='.move'
                    group={{ name: 'drag-group', put: true, pull: true }}
                    ghostClass={moveClassName}
                    dragClass='draging'
                    filter=".filter"
                    list={list}
                    setList={setList}
                    onDragStart={() => console.log('拖拽开始')}
                    onDragMove={() => console.log('拖拽进行中')}
                    onDragEnd={() => console.log('拖拽结束')}
                >
                    {
                        list.map(item => (
                            <DemoBlock key={item.id} text={item.title}></DemoBlock>
                        ))
                    }
                </ReactDraggable>
                <div>
                    <button onClick={() => console.log(list)}>查看列表</button>
                    <button onClick={() => setList([...list, { id: 8, title: '地理' }])}>末尾添加一个地理</button>
                </div>
            </div>
            <div className='wrapper' style={{ backgroundColor: '#eee' }}>
                <ReactDraggable
                    className='draggable_container'
                    animation={1000}
                    sort
                    handle='.move'
                    group={{ name: 'drag-group', put: true, pull: true }}
                    ghostClass='moveing'
                    dragClass='draging'
                    filter=".filter"
                    list={list2}
                    setList={setList2}
                >
                    {
                        list2.map(item => (
                            <DemoBlock key={item.id} text={item.title}></DemoBlock>
                        ))
                    }
                </ReactDraggable>
                <div>
                    <button onClick={() => console.log(list2)}>查看列表</button>
                </div>
            </div>
        </div>
    )
}

export default App